<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			.oauth-area {
				position: absolute;
				bottom: 20px;
				left: 0px;
				text-align: center;
				width: 100%;
				padding: 0px;
				margin: 0px;
			}
			
			.oauth-area .oauth-btn {
				display: inline-block;
				width: 50px;
				height: 50px;
				background-size: 30px 30px;
				background-position: center center;
				background-repeat: no-repeat;
				margin: 0px 20px;
				/*-webkit-filter: grayscale(100%); */
				border: solid 1px #ddd;
				border-radius: 25px;
			}
			
			.oauth-area .oauth-btn:active {
				border: solid 1px #aaa;
			}
			
			.oauth-area .oauth-btn.disabled {
				background-color: #ddd;
			}
			
			
			
			*{
			    /*初始化*/
			    margin: 0;
			    padding: 0;
			}
			body{
			    height: 100vh;
			    /*弹性布局居中*/
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    /*渐变背景*/
			    background: linear-gradient(200deg,#000000,#a9c1ed);
				 
				/* background-image: url(images/bg.gif); */
				background-size:contain;
			   /*溢出影藏*/
			    overflow: hidden;
			}
			.container{
				
			    /*相对定位*/
			    position: relative;
			    z-index: 1;
				background: rgba(0,0,0,0.1);
			    border-radius: 15px;
			    display: flex;
			    /*垂直配列*/
			    flex-direction: column;
			    justify-content: center;
			    align-items: center;
			    width: 300px;
			    height: 400px;
			    /*阴影*/
			    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
			}
			.container .tit{
				
			    font-size: 8vw;
			    margin: 4vw auto 4vw auto;

			}
			.container input{
			    width: 280px;
			    height: 30px;
			    text-indent: 8px;
			    border: none;
			    border-bottom: 1px solid #ddd;
			    outline: none;
			    margin: 12px auto;
			}
			.container button{
			    width: 280px;
			    height: 40px;
			    margin: 35px auto 40px auto;
			    border: none;
			    background: linear-gradient(-200deg,#000000,#aac2ee);
			    color: #fff;
			    font-weight: bold;
			    letter-spacing: 8px;
			    border-radius: 10px;
			    cursor: pointer;
			    /*动画过渡*/
			    transition: 0.5s;
			}
			.container button:hover{
			    background: linear-gradient(-200deg,#000000,#fac0e7);
			    background-position-x: -280px;
			}
			.container span{
			    font-size: 14px;
			}
			.container a{
			    color: plum;
			    text-decoration: none;
			}
			
			ul li{
			    position: absolute;
			    border: 1px solid #fff;
			    background-color: #ffffff;
			    width: 30px;
			    height: 30px;
			    list-style: none;
			    opacity: 0;
			}
			.square li{
			    top: 40vh;
			    left: 60vw;
			    animation: square 10s linear infinite;
			}
			.square li:nth-child(2){
			    top: 80vh;
			    left: 10vm;
			    /*动画延时时间*/
			    animation-delay: 2s;
			}
			.square li:nth-child(3){
			    top: 80vh;
			    left: 85vm;
			    /*动画延时时间*/
			    animation-delay: 4s;
			}
			
			.square li:nth-child(4){
			    top: 10vh;
			    left: 70vm;
			    /*动画延时时间*/
			    animation-delay: 6s;
			}
			
			.square li:nth-child(5){
			    top: 10vh;
			    left: 10vm;
			    /*动画延时时间*/
			    animation-delay: 8s;
			}
			
			.circle li{
			    bottom: 0;
			    left: 15vw;
			    animation: circle 10s linear infinite;
			}
			.circle li:nth-child(2){
			    left: 35vw;
			    animation-delay: 2s;
			}
			.circle li:nth-child(3){
			    left: 55vw;
			    animation-delay: 4s;
			}
			.circle li:nth-child(4){
			    left: 75vw;
			    animation-delay: 6s;
			}
			.circle li:nth-child(5){
			    left: 90vw;
			    animation-delay: 8s;
			}
			
			@keyframes square {
			    0%{
			       transform: scale(0) rotate(0deg);
			        opacity: 0;
			    }
			    100%{
			        transform: scale(0) rotate(1000deg);
			        opacity: 0;
			    }
			
			}
			@keyframes circle{
			    0%{
			        transform: scale(0) rotate(0deg);
			        opacity: 1;
			        bottom: 0;
			        border-radius: 0;
			    }
			    100%{
			        transform: scale(0) rotate(1000deg);
			        opacity: 0;
			        bottom: 90vh;
			        border-radius: 50%;
			    }
			
			}
			
			
			.animate3 {
					margin-top: 20vw;
					margin: auto;
				
			}
			.animate3 span{
				
					font-size: 8vw;
					float: left;
			        animation: animate2 3s linear infinite;
			        animation-delay: calc(0.1s* var(--i));
			    }
			    @keyframes animate2{
			        0%{
			            color: #CCEEFF;
			            filter: blur(0px) hue-rotate(0deg);
			        }
			        30%,70%{
			            color: #665588;
			        }
					100%{
						color: #000000;
					}
			    }
			.music{
				
				position: absolute;
				top: 20px;
				right: 20px;
			}
			@font-face {
			  font-family: 'iconfont';
			  src: url('fonts/music.ttf?t=1662213548987') format('truetype');
			}
			.iconfont {
				color: #FFFFFF;
			  font-family: "iconfont" !important;
			  font-size: 20px;
			  font-style: normal;
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;
			}
			
		</style>
	</head>

	<body>
		
		<div class="mui-content" style="border-radius: 15px; background-image: linear-gradient(200deg,#000000,#a9c1ed);">
			<div class=" container">
				
				<div class="tit animate3" >
					<span style="--i:1;">图</span>
					<span style="--i:2;">像</span>
					<span style="--i:3;">识</span>
					<span style="--i:4;">别</span>
				</div>
				
			      <input id='account' type="text" placeholder="账号">
			      <input id='password' type="password" placeholder="密码">
				  
			      <button  id='login'>登录</button>
				  
			      <span>没有账号？<a id='reg'>去注册</a> <span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a></span>
			  </div>
			 <div class="mui-content-padded oauth-area">
			 
			 	</div>
			 </div>
			
		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script src="../js/config.js"></script>
		<script>
			(function($, doc) {
				$.init({
					statusBarBackground: '#f7f7f7',
				});
				
				$.plusReady(function() {
					
					
					// var old_app_version = app.app_version;
					// var new_app_version = null;
					// var appName = "riddle";
					// mui.ajax(app.getUrl() + 'api/android/update?appName='+appName, {
					// 	dataType: 'json', //服务器返回json格式数据
					// 	type: 'get', //HTTP请求类型
					// 	timeout: 10000, //超时时间设置为10秒；
					// 	contentType: "application/json;charset=utf-8",
					// 	async: false,
					// 	beforeSend: function() {
					// 		plus.nativeUI.showWaiting("正在检测更新...", "options");
					// 		mask.show();
					// 	}, 
					// 	complete: function() {
					// 		plus.nativeUI.closeWaiting();
					// 		mask.close(); //关闭遮罩层
					// 	},
					// 	success: function(data) {
					// 		if (data.errCode === "000000") {
					// 			new_app_version = data.data.version;
					// 		} else {
					// 			plus.nativeUI.toast('出现错误:'+data.errMsg);
					// 		}
					// 	},
					// 	error: function(xhr, type, errorThrown) {
					// 		plus.nativeUI.toast('与服务器断开连接');
					// 	}
					// });
					// if(old_app_version !== new_app_version) {
					// 	var btnarr = ["是", "否"];
					// 	mui.confirm("当前版本并不是最新版本，是否需要更新？", "友情提示", btnarr, function(e) {
					// 		if (e.index == 0) {
					// 			dowload();
					// 		} else {
					// 			return;
					// 		}
					// 	});
					// }
					
					// // 开始下载
					// function dowload(){
					// var options = {method:"GET"};
					// dtask = plus.downloader.createDownload(app.getUrl()+"api/android/downloadRiddleApp", options );
					// dtask.addEventListener( "statechanged", function(task,status){
					// switch(task.state) {
					// case 1: // 开始
					// mui.toast("开始下载...")
					// break;
					// case 2: // 已连接到服务器
					// mui.toast("连接到服务器...")
					// break;
					// case 3: // 已接收到数据
					// alert(task.downloadedSize) // 已下载文件大小
					// alert(task.totalSize) // 文件大小
					// break;
					// case 4: // 下载完成
					// mui.toast("下载完成！")
					// console.log(task.totalSize)
					// plus.io.resolveLocalFileSystemURL(task.filename, function(entry) {
					// console.log(entry.toLocalURL()) //绝对地址
					// // 判断文件是否存在，不存在则不安装
					// plus.io.resolveLocalFileSystemURL(entry.toLocalURL(),function(entry){
					// // 如果存在进行安装
					// if(entry.isFile){
					// plus.runtime.install(app的文件路径, {}, function(){
					// alert("安装成功")
					// }, function(){
					// alert("安装失败")
					// });
					// }else{
					// // 不存在
					// alert("文件不存在")
					// }
					// },function(e){});
					// });
					// alert(task.filename) // 显示下载好的文件名称
					// break;
					// }
					// } );
					// dtask.start();
					// } 
					var loginButton = doc.getElementById('login');
					var accountBox = doc.getElementById('account');
					var passwordBox = doc.getElementById('password');
					var regButton = doc.getElementById('reg');
					var forgetButton = doc.getElementById('forgetPassword');
					loginButton.addEventListener('tap', function(event) {
						var loginInfo = {
							account: accountBox.value,
							password: passwordBox.value
						};
						app.login(loginInfo, function(err) {
							if (err) {
								plus.nativeUI.toast(err);
								return;
							}else {
								var mainView = plus.webview.getWebviewById("main");
								mui.fire(mainView, 'reload');
								mui.openWindow({
									url: 'index.html',
									id: 'index'
								})
							}
							});
							
							
						});

					
					regButton.addEventListener('tap', function(event) {
						$.openWindow({
							url: 'reg.html',
							id: 'reg',
							preload: true,
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					}, false);
					forgetButton.addEventListener('tap', function(event) {
						$.openWindow({
							url: 'forget_password.html',
							id: 'forget_password',
							preload: true,
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					}, false);
					//
					// window.addEventListener('resize', function() {
					// 	oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
					// }, false);
					//
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};
					});
			}(mui, document));
		</script>
	</body>

</html>